<template>
  <div class="bgc-white relative" style="height: calc(100vh - 112px); padding-bottom: 65px">
    <div class="ta-center fs16 fw500 p16 border-bottom relative">
      <span>{{ institutionId ? "编辑" : "新增" }}规章制度</span>
      <div
        class="absolute left-0 top-0 ml16 pointer flex-center"
        style="color: rgba(192, 192, 192, 1); line-height: 58px"
        @click="$router.back()"
      >
        <a-icon type="left" class="fs24 mr8" />
        <span>返回</span>
      </div>
    </div>
    <div class="overflow-y-auto" style="margin: 16px auto; width: 800px; height: calc(100vh - 262px)">
      <div class="title-block">所属分类</div>
      <div v-if="groupLst.length > 0" class="p16">
        <a-tree-select
          v-model="institutionTypeId"
          :treeData="groupLst"
          :replaceFields="{
            children: 'childList',
            title: 'institutionTypeName',
            value: 'id'
          }"
          treeNodeFilterProp="title"
          placeholder="请选择"
          show-search
          style="width: 240px"
        />
      </div>
      <div class="title-block">所属用工单位</div>
      <div class="p16">
        <a-select
          v-model="companyId"
          :options="companyLst"
          placeholder="请选择"
          disabled
          :filterOption="filterOption"
          show-search
          style="width: 240px"
        />
      </div>
      <div class="title-block">制度标题</div>
      <div class="p16">
        <a-input v-model="institutionTitle" placeholder="请输入" style="width: 240px"></a-input>
      </div>
      <div class="title-block">是否开启</div>
      <div class="p16">
        <a-switch v-model="isOpen"></a-switch>
      </div>
      <div class="title-block">附件上传</div>
      <div class="p16">
        <a-upload :fileList="institutionUrl" multiple action="/file/api/v1/general/upload/attachment" name="files" @change="onFileChange">
          <a-button> <a-icon type="upload" />点击上传</a-button>
        </a-upload>
      </div>
      <div class="title-block">制度内容</div>
      <div class="p16">
        <VueWangeditor
          v-model="institutionContent"
          :menus="[
            'head',
            'bold',
            'fontSize',
            'lineHeight',
            'fontName',
            'italic',
            'underline',
            'strikeThrough',
            'foreColor',
            'backColor',
            'justify',
            'image'
          ]"
          class="wangeditor"
          style="z-index: 1; width: 100%"
          @change="onEditorChange"
        />
      </div>
    </div>
    <div class="p16 ta-right border-top absolute left-0 right-0 bottom-0">
      <a-button type="primary" @click="doSave">确定</a-button>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import VueWangeditor from "@/components/ZXR/vueWangeditor";
import { fileListDecode, fileListEncode } from "@/utils/tools";
export default {
  name: "",
  components: { VueWangeditor },
  mixins: [],
  props: {},
  data() {
    return {
      institutionTypeId: undefined,
      companyId: undefined,
      institutionTitle: "",
      isOpen: true,
      institutionUrl: [],
      institutionContent: "",
      plainText: "",
      content: "",
      contentHasStyle: "",
      groupLst: []
    };
  },
  computed: {
    ...mapState(["hr"]),
    companyList() {
      return this.hr.companyList;
    },
    companyLst() {
      return this.companyList.map((item) => ({
        value: item.id,
        label: item.name
      }));
    },
    cId() {
      return this.$route.query.cId;
    },
    tId() {
      return this.$route.query.tId;
    },
    institutionId() {
      return this.$route.query.id;
    },
    institutionDetail() {
      const temp = localStorage.getItem("tempZhidu");
      if (temp) {
        return JSON.parse(temp);
      }
      return null;
    }
  },
  watch: {},
  created() {
    this.onGroupSearchChange();
    if (!this.institutionId) {
      this.companyId = this.cId;
      this.institutionTypeId = this.tId;
    } else {
      this.institutionTypeId = this.institutionDetail.institutionTypeId;
      this.companyId = this.institutionDetail.companyId;
      this.institutionTitle = this.institutionDetail.institutionTitle;
      this.isOpen = this.institutionDetail.isOpen;
      this.institutionUrl = this.institutionDetail.institutionUrl ? fileListEncode(this.institutionDetail.institutionUrl) : [];
      this.institutionContent = this.institutionDetail.institutionContent;
    }
  },
  mounted() {},
  methods: {
    doSave() {
      const newValues = {
        institutionTypeId: this.institutionTypeId,
        companyId: this.companyId,
        institutionTitle: this.institutionTitle,
        isOpen: this.isOpen,
        institutionUrl: fileListDecode(this.institutionUrl),
        institutionContent: this.institutionContent,
        plainText: this.plainText
      };
      if (!this.institutionTypeId || !this.companyId || !this.institutionTitle) {
        this.$message.warning("必须选择分类、用工单位，并填写标题");
        return false;
      }
      if (this.institutionId) {
        this.$request({
          url: `/hr/api/v1/institutions`,
          method: "put",
          data: {
            id: this.institutionId,
            ...newValues
          }
        })
          .then((res) => {
            this.$router.back();
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        this.$request({
          url: `/hr/api/v1/institutions`,
          method: "post",
          data: newValues
        })
          .then((res) => {
            this.$router.back();
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    onEditorChange(html, text) {
      this.contentHasStyle = html;
      this.content = text;
      this.plainText = text;
    },
    onFileChange({ file, fileList }) {
      this.institutionUrl = fileList;
    },
    filterOption(input, option) {
      return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    },
    onGroupSearchChange() {
      this.$request({
        url: `/hr/api/v1/institutionTypes/selectBySite`,
        params: {
          companyId: this.cId
        }
      })
        .then((res) => {
          // const temp = res.data.map((item) => ({
          //   value: item.id,
          //   label: item.institutionTypeName
          // }));
          this.groupLst = res.data.map((item) => ({
            ...item,
            disabled: true
          }));
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss"></style>
